<template>
  <div>
      <el-container>
      <el-header height="75px"><the-header></the-header></el-header>
      <el-container>
        <el-aside width="180px"><the-aside></the-aside></el-aside>
        <el-container>
          <el-main><router-view></router-view></el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>

import TheHeader from '../components/TheHeader.vue'
import TheAside from '../components/TheAside.vue'
export default {
  components: {
    TheHeader,
    TheAside,
  },
}
</script>

<style>
  .el-header{
    background-color: #FFDEE9;
    background-image: linear-gradient(78deg, #FFDEE9 0%, #B5FFFC 50%, #b5fffc 100%);
  }
  .el-container .el-aside .el-main{
    height: calc(100vh - 75px);
  }
</style>
